<template>
  <div class="tagNav">
    <div class="tagsNav">
      <a-dropdown>
        <div class="close iconfont ivu-icon-ios-close-circle-outline acea-row row-center-wrapper"></div>
        <a-menu slot="overlay">
          <a-menu-item>
            <a href="javascript:;" @click="closeAll">关闭所有</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;" @click="closeOther">关闭其他</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
      <div class="btn left-btn iconfont ivu-icon-ios-arrow-back acea-row row-center-wrapper" @click="leftClick"></div>
      <div class="btn right-btn iconfont ivu-icon-ios-arrow-forward acea-row row-center-wrapper" @click="rightClick"></div>
      <div class="scroll-outer" ref="scroll-outer">
        <div class="scroll-body acea-row row-middle" ref="scroll-body" :style="'left:-'+left+'px;'">
          <div class="tag tag-dot acea-row row-middle" ref="tag" v-for="(item,index) in tagList" :key="index" @click="checkTag(item.name,index)" >
            <div class="tag-dot-inner" :class="item.isCheck?'act':''"></div>
            <div class="tag-text">{{item.title}}</div>
            <div class="iconfont ivu-icon-ios-close" v-if="item.name!='home'" @click.stop="closeTag(item.name)"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {setCookie,getCookie,removeCookie} from 'api/common/cookie.js'
export default {
  data() {
    return {
      winScreenWidth:document.body.clientWidth,
      timer:null,
      step:240,
      scrollIdx:0,
      left:0,
      list:[],
      menuList:[]
    }
  },
  created() {
    
  },
  mounted() {
    const that = this
    let idx = this.tagList.findIndex(e=>e.isCheck)
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth
        this.timer = setTimeout(() => {
          that.winScreenWidth = window.screenWidth
        }, 200);
      })()
    }
    setTimeout(() => {
      this.moveToView(idx)
    }, 1);
  },
  computed: {
    tagList(){
      return this.$store.state.menu.tagList
    }
  },
  methods: {
    checkTag:function(name,idx){
      let menuList = this.$store.state.menu.menuList
      let path = menuList.find(e=>e.name==name).path
      this.$router.push({
        path
      })
      this.moveToView(idx)
    },
    closeTag:function(name){
      this.$store.commit('menu/closeTag',name)
    },
    closeAll:function(){
      this.$store.commit('menu/closeAll')
      this.checkTag('home',0)
    },
    closeOther:function(){
      this.$store.commit('menu/closeOther')
      this.moveToView()
    },
    saveTag:function(){
      let list = this.$store.state.menu.tagList 
      setCookie('router',list)
    },
    leftClick:function(){
      let step = this.step
      let scrollIdx = this.scrollIdx
      let e = this.getDom()
      let left = this.left - step
      if(left>=0){
        this.scrollIdx = scrollIdx - 1
        this.left = left - 4
      }else{
        if(left > -step){
          this.scrollIdx = scrollIdx - 1
          this.left = 0 
        }
      }
    },
    rightClick:function(){
      let step = this.step
      let scrollIdx = this.scrollIdx + 1
      let e = this.getDom()
      let left = this.left
      let w = e.scrollBodyWidth - left - step
      if(e.scrollOuterWidth<=w){
        left = left + step
        this.scrollIdx = scrollIdx
        this.left = left - 4
      }else{ 
        let ws = e.scrollBodyWidth - left
        if(ws>e.scrollOuterWidth){
          let c = ws - e.scrollOuterWidth
          left += c
          this.scrollIdx = scrollIdx
          this.left = left - 4
        }
      }
    },
    moveToView(index){
      let idx = index?index:this.tagList.findIndex(e=>e.isCheck)
      let tag = this.$refs.tag[idx]
      let e = this.getDom()
      let left = this.left
      if (e.scrollBodyWidth < e.scrollOuterWidth) {
        left = 0
      } else if (tag.offsetLeft < -this.left) {
        // 标签在可视区域左侧
        left = -tag.offsetLeft + 4
      } else if (tag.offsetLeft > -this.left && tag.offsetLeft + tag.offsetWidth < -this.left + e.scrollOuterWidth) {
        // 标签在可视区域
        left = Math.min(0, e.scrollOuterWidth - tag.offsetWidth - tag.offsetLeft - 4)
      } else {
        // 标签在可视区域右侧
        left = -(tag.offsetLeft - (e.scrollOuterWidth - 4 - tag.offsetWidth))
      }
      this.left = -left
    },
    getDom:function(){
      let scrollOuter = this.$refs['scroll-outer']
      let scrollBody = this.$refs['scroll-body']
      let scrollOuterWidth = scrollOuter.clientWidth
      let scrollBodyWidth = scrollBody.clientWidth
      return {scrollOuterWidth,scrollBodyWidth}
    }
  },
  watch: {
    winScreenWidth(val){
      clearTimeout(this.timer)
      this.moveToView()
    },
    tagList(){
      this.moveToView()
    }
  },
}
</script>

<style scoped>
  .tagNav{
    height: 40px;
    background: #f0f0f0;
    padding: 0;
  }
  .tagNav .tagsNav{
    width: 100%;
    height: 100%;
    position: relative;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
    user-select: none;
  }
  .tagNav .tagsNav .close{
    position: absolute;
    top: 0px;
    right: 0;
    height: calc(100% - 2px);
    width: 32px;
    text-align: center;
    background: #fff;
    z-index: 10;
    font-size: 18px;
  }
  .tagNav .tagsNav .btn{
    position: absolute;
    top: 0px;
    width: 30px;
    height: calc(100% - 2px);
    background: #fff;
    z-index: 10;
  }
  .tagNav .tagsNav .btn.left-btn{
    left: 0;
  }
  .tagNav .tagsNav .btn.right-btn{
    right: 32px;
    border-right: 1px solid #f0f0f0;
  }
  .tagNav .tagsNav .scroll-outer{
    position: absolute;
    left: 30px;
    right: 62px;
    top: 0;
    bottom: 0;
    -webkit-box-shadow: 0 0 3px 2px hsla(0,0%,39.2%,.1) inset;
    box-shadow: inset 0 0 3px 2px hsla(0,0%,39.2%,.1);
  }
  .tagNav .tagsNav .scroll-outer .scroll-body{
    height: calc(100% - 1px);
    padding: 1px 4px 0;
    position: absolute;
    overflow: visible;
    white-space: nowrap;
    transition: left .3s ease;
    flex-wrap: nowrap;
  }
  .tagNav .tagsNav .scroll-outer .scroll-body .tag{
    height: 22px;
    margin: 2px 4px 2px 0;
    padding: 0 8px;
    border: 1px solid #e8eaec;
    border-radius: 3px;
    background: #f7f7f7;
    font-size: 12px;
    vertical-align: middle;
    opacity: 1;
    overflow: hidden;
    cursor: pointer;
    flex-wrap: nowrap;
  }
  .tagNav .tagsNav .scroll-outer .scroll-body .tag-dot{
    height: 32px;
    border: 1px solid #e8eaec!important;
    color: #515a6e!important;
    background: #fff!important;
    padding: 0 12px;
  }
  .tagNav .tagsNav .scroll-outer .scroll-body .tag .tag-dot-inner{
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 50%;
    background: #e8eaec;
    position: relative;
    top: 1px;
  }
  .tagNav .tagsNav .scroll-outer .scroll-body .tag .tag-dot-inner.act{
    background: #2d8cf0;
  }
  .tagNav .tagsNav .scroll-outer .scroll-body .tag .tag-text{
    color: #515a6e;
  }
  .tagNav .tagsNav .scroll-outer .scroll-body .tag .iconfont{
    font-size: 21px;
    line-height: normal;
    margin-left: 8px;
  }
</style>